<template>
	<view class="per_main">
		<view class="head">
			<view class="head-box">
				<view class="avatar">
					<view class="hg" v-if="info.vip">
						<image src="https://friend.tanshishang.cn/assets/img/vip-on.png" mode=""></image>
					</view>
					<image class="main" :src="info.avatar?info.avatar:'https://friend.tanshishang.cn/assets/img/avatar2.png'" mode="widthFix"></image>
					<view class="tags">
						<image class="sm" src="https://friend.tanshishang.cn/assets/img/shiming.png" mode="" v-if="info.materialstatus==1"
						 @tap="doSm"></image>
						<image class="vp" src="https://friend.tanshishang.cn/assets/img/tag-vip.png" mode="" v-if="info.vip"></image>
					</view>
				</view>
				<!-- 				<view class="name">
					{{ info.nickname }}
					<i class="iconfont iconqiangtiao1 icon-gender " v-if="type==0" style="color: #0091FF;"></i>
					<i class="iconfont iconicon_nv icon-gender " v-if="type==1" style="color: #FF77A1;"></i>
				</view> -->
			</view>
		</view>

		<!-- 滚动图 -->
		<view class="scroll-box">
			<scroll-view scroll-x="true" class="scroll" show-scrollbar="false">
				<view class="scroll_items" v-for="(ig,igIndex) in photos" :key="igIndex">
					<view class="scroll_img">
						<image :src="ig" mode="" @tap="showImgs(igIndex)"></image>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 联系方式 -->
		<view class="contact" v-if="!infoShow">
			<view class="ct-title">联系方式</view>
			<view class="ct-box">
				<view class="ct-item">
					<view class="ct-itemer">
						<i class="iconfont iconweixinhao" style="color: #08BA06;font-size: 38rpx;margin-right: 10rpx;"></i>微信号:<span>{{ info.wxid }}</span>
					</view>
					<!-- <text class="chakan" v-if="isVip&&agree" @tap="toCpopy(0)">复制</text> -->
					<!-- <text class="chakan" v-else @tap="toCheck(0)">查看</text> -->
				</view>
				<view class="ct-item">
					<view class="ct-itemer">
						<i class="iconfont iconshoujihao" style="color: #3DABFF;font-size: 38rpx;margin-right: 10rpx;"></i>手机号:<span>{{ info.mobile }}</span>
					</view>
					<!-- <text class="chakan" v-if="isVip&&agree" @tap="toCpopy(1)">复制</text> -->
					<!-- <text class="chakan" v-else @tap="toCheck(0)">查看</text> -->
				</view>
			</view>
		</view>

		<!-- 简介 -->
		<view style="padding: 0 20px 20px 20px;">
			<view class="per_desc my_desc_3">
				<view class="per_desc_1">
					<view class="per_desc_1_text">
						编号{{info.love_id}}
					</view>
					<view>
						<image class="per_desc_1_icon" :src="require('../../static/images/girl.png')" mode="widthFix"></image>
					</view>
				</view>
				<view class="per_desc_2">{{info.age}}岁 · {{info.zodiac_str}} · {{info.height}}cm ·
					{{info.weight}}kg · {{info.marry_str}}</view>
				<view class="per_desc_2">{{info.education_str}} · {{info.income_str}}</view>
				<view class="per_desc_2">{{allList.industry[info.occupation]?allList.industry[info.occupation].name:''}}</view>
				<view class="per_desc_2" v-if="info.hobby">爱好：{{info.hobby}}</view>
			</view>
			<view style="margin-top: 10px;">
				<hr color="#f8f8f8">
			</view>
			<!-- <view class="my_desc_3" v-for="(item,index in descs)" :key="index"> -->
			<view class="my_desc_3">
				<view class="my_desc_3_title">信息资料</view>
				<view class="my_desc_3_info">
					<view>性别</view>
					<view>{{info.gender_str}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>年龄</view>
					<view>{{info.age}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>生日</view>
					<view>{{info.birthday}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>地址</view>
					<view>{{info.address}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>购房</view>
					<view>{{getNameById('housedata',info.house,'housedata')}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>购车</view>
					<view>{{getNameById('cardata',info.is_car,'cardata')}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>属</view>
					<view>{{info.zodiac_str}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>星座</view>
					<view>{{getNameById('constellation',info.constellation)}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>是否会做饭</view>
					<view>{{getNameById('cookingdata',info.is_cook,'cookingdata')}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>接受年龄范围</view>
					<view>{{getNameById('age',info.is_age,'age')}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>是否接受离婚</view>
					<view>{{getNameById('is_divorce',info.is_divorce)}}</view>
				</view>
				<view v-if="info.is_divorce==1" class="my_desc_3_info">
					<view>是否接受小孩</view>
					<view>{{getNameById('is_kids',info.is_kids)}}</view>
				</view>
				<view v-if="info.is_divorce==1 && (info.is_kids==1||info.is_kids==2||info.is_kids==3)" class="my_desc_3_info">
					<view>小孩跟谁一起生活</view>
					<view>{{getNameById('kids_live',info.kids_live)}}</view>
				</view>
				
				<view class="my_desc_3_info">
					<view>彩礼</view>
					<view>{{info.betrothal_gifts}}</view>
				</view>
				<view class="my_desc_3_info">
					<view>其它择偶要求</view>
					<view style="width: 60%;">{{info.content}}</view>
				</view>
			</view>
			<view class="my_desc_3">
				<view class="my_desc_3_title">性格与兴趣</view>
				<view class="my_desc_3_tag">
					<view class="item" v-for="(item,index) in tags" :key="index" :style="'background-color:'+randomColorArr[index]">
						<view class="text">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="my_desc_3">
				<view class="my_desc_3_title">自我介绍</view>
				<!-- <view class="my_desc_3_desc">{{myInfo.desc}}</view> -->
				<view class="my_desc_3_desc">{{info.declaration}}</view>
			</view>
		</view>

		<!-- 占位符 -->
		<view class="place"></view>

		<view class="foot" v-if="infoShow">
			<view class="ft-yue" @tap="doSomething(0)">想约{{ type==0?'他':'她' }}</view>
			<!-- <view class="gz" v-if="!gz" @tap="doSomething(1)">+关注</view> -->
			<view class="gz" v-if="gz" @tap="cnacelGuanz()">已关注</view>
			<view class="ft-hong" @tap="doSomething(2)">求助红娘</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		arrData
	} from '@/common/arr';
	export default {
		computed: {
			...mapState(['token'])
		},
		data() {
			return {
				tagBackground: ["#e16fff", "#e16fff", "#ff306b", "#aa00ff", "#ff0000", "#ca2dff", "#2db3ff", "#47d38b", "#ffaaff",
					"#68dba5", "#ff4242",
				],
				randomColorArr: ["#e16fff", "#e16fff", "#ff306b", "#aa00ff", "#ff0000", "#ca2dff", "#2db3ff", "#47d38b", "#ffaaff",
					"#68dba5", "#ff4242",
				],
				tags: ["活泼开朗", "独立", "喜欢音乐", "笑", "睡觉", "游戏", "乐观向上", ],
				id: '',
				type: '',
				info: {
					love_id: 0,
					age: 0,
					zodiac_str: '',
					zodiac: 0,
					height: 0,
					weight: 0,
					marry: 0,
					marry_str: '',
					education_str: '',
					education: 0,
					income: 0,
					income_str: '',
					occupation: '',
					hobby: '',
					gender: 0,
					gender_str: '',
					declaration: '',
					
				},
				gz: '',
				agree: false,
				isVip: false,
				kf: '',
				//活动
				photos: [],
				imgs: ["https://friend.tanshishang.cn/assets/img/shareImg.png",
					"https://friend.tanshishang.cn/assets/img/shareImg.png", "https://friend.tanshishang.cn/assets/img/shareImg.png",
				],
				kfList: ['13616171314', '13616181314'],
				infoShow: true,
				myInfo: {},
				allList:{},
			};
		},
		//分享给个人
		onShareAppMessage() {
			return {
				title: '青年交友',
				imageUrl: 'https://friend.tanshishang.cn/assets/img/shareImg.png',
				path: '/pages/index/index'
			}
		},
		onLoad(options) {
			this.allList = arrData
			console.log(this.allList);
			if (options.type == 0) {
				uni.setNavigationBarTitle({
					title: '他的详情'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '她的详情'
				})
			}
			options.from == 'query' ? this.infoShow = false : this.infoShow = true;
			this.type = options.type;
			this.id = options.id;
			this.getData();
			this.getImageData();
		},
		onShow() {
			// this.imgs = [];
			// this.getData();
			let colorLen = this.tagBackground.length
			this.randomColorArr = []
			for (var i = 0; i <= colorLen; i++) {
				let random = this.tagBackground[Math.floor(Math.random() * colorLen)];
				this.randomColorArr.push(random);
			}
		},
		methods: {
			//点击了实名认证图片
			doSm() {
				if (this.info.materialstatus == 1) {
					uni.showToast({
						title: '已实名认证!',
						mask: true
					})
				}
			},
			//复制
			toCpopy(e) {
				if (e == 0) {
					//复制微信
					uni.setClipboardData({
						data: this.info.wxid,
						success: function() {
							console.log('success');
						}
					});

				} else {
					//复制手机号
					uni.setClipboardData({
						data: this.info.mobile,
						success: function() {
							console.log('success');
						}
					});
				}
			},
			//查看值
			toCheck() {
				if (!this.agree) {
					let content;
					this.type == 0 ? content = '点击下方【想约他】按钮,对方同意后才可查看该信息!' : content = '点击下方【想约她】按钮,对方同意后才可查看该信息!';
					uni.showModal({
						title: '温馨提醒',
						content: content,
						confirmText: '知道了',
						showCancel: false,
						success: (res) => {
							console.log(res);
						}
					});
					return false;
				}
			},
			getRand() {
				let i = Math.floor((Math.random() * 10) + 1)
				console.log('#@@@@@@@@@@@@@@', i, this.tagBackground[i])
				return this.tagBackground[i]
			},
			//图片预览
			showImgs(e) {
				// 预览图片
				uni.previewImage({
					current: e,
					urls: this.photos
				});
			},
			doSomething(e) {
				let phone = '13961989352'
				if (e == 2) {
					phone = '17712534089'
				}
				uni.showModal({
					title: '温馨提醒',
					content: '请添加红娘微信：'+phone,
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							//前往开通vip
							// this.toPay();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return false;

				if (!this.isVip) {
					uni.showModal({
						title: '温馨提醒',
						content: '您还未开通VIP，仅有VIP才能进行此项操作!',
						confirmText: '开通VIP',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								console.log('用户点击确定');
								//前往开通vip
								this.toPay();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return false;
				}

				if (e == 0) {
					//想约

					//获取本地存储判断是否约过
					let value = uni.getStorageSync('data_count')
					console.log(value);
					if (value == this.id) {
						//约过
						this.doAppoint();
					} else {

						uni.showModal({
							title: '温馨提醒',
							content: '您需要支付200元才能发起约会，对方若拒绝约会，费用会立即自动退还至您的账户；对方若迟迟没有确认是否约会，费用会在7个自然日内退还至您的账户。',
							confirmText: '继续',
							cancelText: '放弃',
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确定');
									this.doAppoint();
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				} else if (e == 1) {
					//关注
					this.doGuanz();
				} else if (e == 2) {
					//求助
					this.doTel();
				}
			},
			//创建订单
			async toPay() {
				try {
					let params = {
						token: this.token
					};
					let res = await this.$request.request.get('/api/user/renewal', params)
					// console.log(res);
					if (res.code == 200) {
						//跳转支付页
						uni.navigateTo({
							url: '/pages/my/payInfo?orderNo=' + res.data.orderNo + '&type=0' + '&price=' + res.data.price
						})
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//打电话
			doTel() {
				// uni.showModal({
				// 	title: '红娘热线',
				// 	content: this.kf,
				// 	showCancel: true,
				// 	confirmText: '拨打',
				// 	success: (res) => {
				// 		// console.log(res);
				// 		if (res.confirm) {
				// 			uni.makePhoneCall({
				// 				phoneNumber: this.kf
				// 			});
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}

				// 	}
				// });

				uni.showActionSheet({
					itemList: ['13616171314（微信同号）', '13616181314 （微信同号）'],
					success: (res) => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						let num = res.tapIndex;
						uni.makePhoneCall({
							phoneNumber: this.kfList[num]
						});
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			//相约他/她
			async doAppoint() {
				try {
					let params = {
						token: this.token,
						userId: this.id
					};
					let res = await this.$request.request.post('/api/index/appointment', params)
					// console.log(res);
					if (res.code == 200) {
						//设置本地弹窗存储
						uni.setStorageSync('data_count', this.id);
						//跳转支付页
						uni.navigateTo({
							url: '/pages/my/payInfo?orderNo=' + res.data.orderNo + '&type=3' + '&price=' + res.data.price + '&title=' +
								res.data.title + '&from=personal'
						})
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//获取数据
			async getData() {
				try {
					let params = {
						token: uni.getStorageSync('token'),
						id: this.id,
					};
					let res = await this.$request.request.get('/api/index/info', params)
					// console.log(111111111, res.code, res);
					if (res.code == 200) {
						let user = res.data.data
						console.log(user)
						this.info = user;
						this.info.vip = 0;
						// this.tags = user.character ? user.character.split(',') : [];
						this.gz = res.data.attention;
						this.isVip = res.data.isVip;
						this.kf = res.data.mobile;
						this.agree = res.data.agree;
						
						let character = user.character.split(',') 
						let tagarr = []
						if (character) {
							for (let a in character) {
								if (character[a]) {
									tagarr.push(character[a])
								}
							}
						}
						if (tagarr){
							this.tags = tagarr
						}
						//图片数组
						let arr = res.data.image;
						for (let i in arr) {
							if (arr[i]) {
								this.imgs.push(arr[i].url);
							}
						}
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			async getImageData() {
				try {
					let params = {
						token: uni.getStorageSync('token'),
						id: this.id,
					};
					let res = await this.$request.request.get('/api/user/image', params)
					console.log("相册------", res)
					if (res.code == 200) {
						let arr = res.data.data
						//图片数组
						for (let i in arr) {
							if (arr[i]) {
								this.photos.push(arr[i].url);
							}
						}
					}
				} catch (err) {
					// this.$request.error(err, this)
				}
			},
			//点击关注
			async doGuanz() {
				try {
					let params = {
						token: this.token,
						toUserId: this.id
					};
					let res = await this.$request.request.post('/api/attention/increase', params)
					// console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: res.msg
						});
						this.gz = true;
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//取消关注
			async cnacelGuanz() {
				try {
					let params = {
						token: this.token,
						userId: this.id
					};
					let res = await this.$request.request.post('/api/attention/cancle', params)
					// console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: res.msg
						});
						this.gz = false;
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			// 微信号
			wx_confusion(e) {
				return e.substr(0, 1) + "****";
			},
			//手机号
			phone_confusion(e) {
				return e.substr(0, 3) + "****" + e.substr(7);
			},
			getNameById(field,id,name){
				if (!this.allList[field]){
					return
				}
				let index = this.allList[field].findIndex((item)=>{
					return id == item.id
				})
				if (index == -1){
					return
				}
				if (name){
					return this.allList[field][index][name]
				} else {
					return this.allList[field][index].name
				}
			}
		}
	}
</script>

<style lang="scss">
	@import 'personal.scss'
</style>
